import { Badge, Timeline as AntTimeline } from 'antd'
import type { TimelineProps as AntTimelineProps, TimelineItemProps as AntTimelineItemProps } from 'antd'
import styles from './index.module.less'
import { ReactNode } from 'react'

export interface TimelineItemsProps extends AntTimelineItemProps {
  title?: ReactNode
}

export interface TimelineProps extends AntTimelineProps  {
  items: TimelineItemsProps[]
}

export const Timeline = ({ items, className = '', ...restProps }: TimelineProps) => {
  return (
    <AntTimeline className={`${styles['timeline-container']} ${className}`} {...restProps}>
      {items?.map(({ title, children, ...item }) => (
        <AntTimeline.Item dot={<Badge color="#2AD200"></Badge>} {...item}>
          <div className={styles.title} >{title}</div>
          <div className={styles.body} >{children}</div>
        </AntTimeline.Item>
      ))}
    </AntTimeline>
  )
}
